<template>
  <div class="map">
    <div class="map1"><img src="../assets/img/lbx.png" /></div>
    <div class="map2"><img src="../assets/img/jt.png" /></div>
    <div class="map3"><img src="../assets/img/map.png" /></div>
    <div class="map4" id="map_1"></div>
    <div ref="EcharRef" id="map_1" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { debounce } from "./mixins/debounce";
import { registerChinaMap } from "@/assets/json/echartsJson";
export default defineComponent({
  setup(props: any) {
    // echart节点
    const charts = ref<HTMLElement | null>(null);
    const data = [
      { name: "浙江省", value: [120.1, 30.16, 117] },
      { name: "福建省", value: [119.18, 26.05, 81] },
      { name: "广东省", value: [113.14, 23.08, 61] },
      { name: "北京市", value: [116.24, 39.55, 52] },
      { name: "青海省", value: [101.48, 36.38, 32] },
      { name: "四川省", value: [104.04, 30.4, 27] },
      { name: "辽宁省", value: [123.25, 41.48, 26] },
      { name: "湖北省", value: [112.27, 30.15, 25] },
      { name: "山东省", value: [118.0, 36.4, 22] },
      { name: "江西省", value: [115.55, 28.4, 22] },
      { name: "河南省", value: [113.4, 34.46, 22] },
      { name: "湖南省", value: [112.59, 28.12, 22] },
      { name: "海南省", value: [110.2, 20.02, 18] },
      { name: "上海市", value: [121.29, 31.14, 16] },
      { name: "江苏省", value: [118.46, 32.03, 16] },
      { name: "吉林省", value: [125.19, 43.54, 15] },
      { name: "天津市", value: [117.12, 39.02, 15] },
      { name: "宁夏回族自治区", value: [106.16, 38.27, 12] },
      { name: "山西省", value: [112.33, 37.54, 12] },
      { name: "河北省", value: [114.3, 38.02, 10] },
      { name: "新疆维吾尔自治区", value: [87.36, 43.45, 7] },
      { name: "黑龙江省", value: [128.36, 45.44, 7] },
      { name: "安徽省", value: [117.17, 31.52, 6] },
      { name: "云南省", value: [102.42, 25.04, 5] },
      { name: "内蒙古自治区", value: [108.41, 40.48, 5] },
      { name: "陕西省", value: [108.57, 34.17, 5] },
      { name: "甘肃省", value: [103.51, 36.04, 4] },
      { name: "贵州省", value: [106.42, 26.35, 4] },
      { name: "广西壮族自治区", value: [108.19, 22.48, 3] },
      { name: "西藏自治区", value: [91.08, 29.39, 1] },
      { name: "重庆市", value: [106.54, 29.59, 1] },
    ];
    onMounted(() => {
      const myChart = echarts.init(
        document.getElementById("map_1") as HTMLElement
      );
      echarts.registerMap("china", registerChinaMap);
      const option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (typeof params.value[2] == "undefined") {
              return params.name + " : " + params.value;
            } else {
              return params.name + " : " + params.value[2];
            }
          },
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false, //禁止其放大缩小
          itemStyle: {
            normal: {
              areaColor: "#4c60ff",
              borderColor: "#002097",
            },
            emphasis: {
              areaColor: "#293fff",
            },
          },
        },
        series: [
          {
            name: "消费金额",
            type: "scatter",
            coordinateSystem: "geo",
            data: data,
            symbolSize: function (val) {
              console.log(val[2]);
              return val[2] / 5;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#ffeb7b",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      window.addEventListener(
        "resize",
        debounce(() => {
          myChart.resize();
        })
      );
    });
    return {
      charts,
    };
  },
});
</script>
<style scoped lang="scss">
.map {
  position: relative;
  height: 100%;
  z-index: 9;
  text-align: center;
  .map4 {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 9999;
  }
  .map2,
  .map3 {
    height: 100%;
    img {
      height: 90%;
    }
    position: absolute;
    top: 3vh;
    opacity: 0.5;
  }
  .map1 {
    height: 100%;

    img {
      height: 100%;
    }
    position: absolute;
    opacity: 0.5;
  }
  .map1 {
    width: 100%;
    z-index: 2;
    animation: myfirst2 15s infinite linear;
  }
  .map2 {
    width: 100%;
    z-index: 3;
    opacity: 0.2;
    animation: myfirst 10s infinite linear;
  }
  .map3 {
    width: 100%;

    z-index: 1;
  }
}

@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
</style>
